import './srollListItem.scss';

function scrollListItemTitle(context) {
	const { props } = context;
	if (props.entityData.type === 'Member') {
		return `${props.entityData.$_showLabel}\n${$i18n('org.post.label')}：${props.entityData.postName || '暂无'}\n${$i18n('org.department.label')}：${props.entityData.deptFullName || '暂无'}`;
	} else if (props.entityData.type === 'Department' && props.entityData.internal) {
		let deptFullName = props.entityData.deptFullName;
		let names = deptFullName.split('/');
		let postName;
		if (names.length <= 1) {
			postName = `${deptFullName}`;
		} else {
			if (names.length > 2) {
				postName = `${names[names.length - 2]}`;
			} else {
				postName = `${props.entityData.accountShortName}`;
			}
		}
		return `${props.entityData.$_showLabel}\n上级：${postName}`;
	} else {
		let str = `${props.entityData.name}\n`;
		if (props.titleProps !== undefined) {
			for (let key in props.titleProps) {
				if (props.entityData[key]) {
					str += `${props.titleProps[key]}：${props.entityData[key] || ''}\n`;
				}
			}
		}
		return str;
	}
}
function scrollListItemOnClickLabel(on) {
	if (this.isRightTooltip) {
		return;
	}
	if (this.smodel === 'single') {
		if (this.onRadioLabelToggle) {
			this.onRadioLabelToggle(this.entityData);
		} else {
			on.radioLabelToggle(this.entityData);
		}
	} else {
		if (this.onPropToggle) {
			this.onPropToggle(this.entityData);
		} else {
			on.propToggle(this.entityData);
		}
	}
}
export default {
	name: 'scrollListItem',
	functional: true,
	props: {
		iconType: {},
		/** 实体数据 */
		entityData: { type: Object, default: () => { } },
		/** 选择模式，mult：默认多选， single: 单选 */
		smodel: { type: String, default: 'mult' },
		/* 列表中是否展示其他属性 */
		showOtherProp: { type: Boolean, default: true },
		/* 其他属性字段 */
		otherProps: { type: Array, default: () => [] },
		/** 是右侧侧提示框吗？ */
		isRightTooltip: { type: Boolean, default: false },
		onRadioLabelToggle: {},
		onPropToggle: {},
		selectType:{ type: Array, default: () => [] },
	},
	render(createElement, context) {
		const { props, data } = context;
		let panel = context.parent.$parent.app().activeTab;
		// alert(JSON.stringify(props));
		// TODU:优化性能？为啥不能弹性布局
		let exitDom = '';
		if (props.showOtherProp && props.otherProps.length) {
			if(props.selectType.includes('Mobile') && panel != 'Team'){
				exitDom = 
					<div class="other-prop-right prop-label">
						{props.entityData['mobile']} 
					</div>;
			}else if(props.selectType.includes('Email') && panel != 'Team'){
				exitDom = <div class="other-prop-right prop-label">
						{props.entityData['email']} 
					</div>;
			}else{
				exitDom = props.otherProps.map(otherProp => {
					return props.entityData[otherProp] && (<div class="other-prop-right prop-label">
						{props.entityData[otherProp]} 
					</div>);
				});
			}
		}
		return (
			<div class="scroll-list-item-box" onClick={scrollListItemOnClickLabel.bind(props, data.on)} title={scrollListItemTitle(context)}>
				<div
					class="prop-label"
				>
					<span class="icon-box">{props.iconType ? (<icon-font type={props.iconType} style="font-size: 18px; margin-right: 5px" />) : ''}</span>
					{context.props.entityData.$_showLabel}
				</div>
				{exitDom}
			</div>
		);
	}
};
